<template>
  <el-dialog title="分配角色" :visible="showDialog" width="50%" @close="btnCancel">

    <el-checkbox-group v-model="roleIds">
      <el-checkbox v-for="item in list" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
    </el-checkbox-group>

    <span slot="footer" class="dialog-footer">
    <el-button @click="btnCancel">取 消</el-button>
    <el-button type="primary" @click="btnOk">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>

  import {getUserDetailById} from "@/api/user";
  import {getRoleList} from "@/api/setting";
  import {assignRoles} from "@/api/employees";

  export default {
    name: "assign-role",
    props: {
      showDialog: {
        type: Boolean,
        default: false
      }, userId: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        list: [],
        roleIds: []
      }
    },
    created() {
      this.getRoleList()
    },

    methods: {
      async btnOk() {
        await assignRoles({id: this.userId, roleIds: this.roleIds})
        this.$emit('update:showDialog', false)
      },
      btnCancel() {
        this.roleIds = []
        this.$emit('update:showDialog', false)
      },
      async getUserDetailById(id) {
        const {roleIds} = await getUserDetailById(id)
        this.roleIds = roleIds
      },
      async getRoleList() {
        const {rows} = await getRoleList()
        this.list = rows;
      }

    }

  }
</script>

<style scoped>

</style>
